<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>出差申请书</title>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="/layui/jquery-3.5.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <!--动态加载随行人员选项-->
    <script type="text/html" id="staffoption">
        <option value="">直接选择或搜索选择</option>
        <option
                th:each="value : ${staffs}"
                th:value="${value.id}"
                th:text="${value.name} + ${value.jobNumber}">
        </option>
    </script>

    <script th:inline="javascript">
        layui.use(['form', 'layedit', 'laydate', 'jquery'], function(){
            var form = layui.form
                ,layer = layui.layer
                ,layedit = layui.layedit
                ,laydate = layui.laydate
                ,$ = layui.jquery;

            //日期
            laydate.render({
                elem: '#begin-date',
                min : getNowFormatDate()
            });

            //创建一个编辑器
            var editIndex = layedit.build('LAY_demo_editor');

            //自定义验证规则
            form.verify({
                content: function(value){
                    layedit.sync(editIndex);
                }
            });

            //监听提交
            form.on('submit(demo1)', function(data){
                // layer.alert(JSON.stringify(data.field), {
                //     title: '最终的提交信息'
                // })
                var array = [];
                var repeated = true;
                array.push($("#applicating_staff").val());
                $(".accompanying_staff").each(function () {
                    if (array.includes($(this).val())){
                        layer.msg("不允许重复人员");
                        repeated = false;
                    }
                    array.push($(this).val());
                })
                if (repeated){
                    $.ajax({
                        url:'/submitApplication',
                        data:data.field,
                        success:function(){
                            layer.msg('提交成功');
                            window.location = '/business-trip/table-applications';
                        },
                    })
                }

                return false;
            });

            var addMemberNum = 0;
            //添加随行人员
            layui.$('.layui-btn-sm').on('click', function () {
                var addmember = $("<div class=\"layui-inline\">" +
                    "                 <label class=\"layui-form-label\">随行人员</label>\n" +
                    "                 <div class=\"layui-input-inline\">\n" +
                    "                   <select class=\"accompanying_staff\" lay-verify=\"required\" lay-search=\"\">" +
                    "                   </select>\n" +
                    "                 </div>\n" +
                    "                 <a class=\"layui-btn layui-btn-primary layui-btn-radius layui-btn-xs delmember\" lay-event=\"del\"> X </a>\n" +
                    "              </div>");
                addmember.find("select").html($("#staffoption").html());
                addmember.find("select").attr("name", "travelPeoples["+addMemberNum+"].staff.id");
                $(addmember).insertBefore($("#mybtn"));
                form.render('select');
                addMemberNum++;
            });
            //删除随行人员
            layui.$("body").on("click",".delmember", function () {
                $(this).parent().remove();
            });
            // layui.$('#add-ticket-btn').on('click', function () {
            //     $(buyticket).insertBefore($("#add-ticket-btn"));
            //     form.render();
            // })
            //
            // layui.$('#add-vehicle-btn').on('click', function () {
            //     $(dispatchcar).insertBefore($("#add-ticket-btn"));
            //     form.render();
            // })
            //
            // layui.$('#add-hotel-btn').on('click', function () {
            //     $(addhotel).insertBefore($("#add-ticket-btn"));
            //     form.render();
            // })

        });
        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month
                + seperator1 + strDate + " " + date.getHours() + seperator2
                + date.getMinutes() + seperator2 + date.getSeconds();
            return currentdate;
        }
    </script>
</head>
<body>
<button class="layui-btn layui-btn-sm" style="position: fixed" onClick="javascript :history.back(-1);">返回</button>

    <div style="margin: auto; width: 900px"><br><br>
        <h1>出差申请</h1>
        <form class="layui-form" action="" method="post">
            <input type="hidden" name="node" value="1">
            <fieldset class="layui-elem-field" style="margin-top: 20px;">
                <legend>基本信息</legend>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">申请人</label>
                        <div class="layui-input-inline">
                            <input lay-verify="required" type="text" readonly="readonly" autocomplete="off" class="layui-input" th:value="${session.user.name}">
                            <input type="hidden" th:value="${session.user.id}" name="staff.id" id="applicating_staff">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">出发日期</label>
                        <div class="layui-input-inline">
                            <input type="text" th:autocomplete="off"  name="planTravelDate" id="begin-date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">出差天数</label>
                        <div class="layui-input-inline">
                            <input type="text" name="planDays" lay-verify="number" lay-reqtext="请输入出差天数" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

            </fieldset>

            <fieldset class="layui-elem-field" style="margin-top: 20px;">
                <legend>随行人员</legend>
                <div class="layui-form-item">
        <!--            <div class="layui-inline">-->
        <!--                <label class="layui-form-label">随行人员</label>-->
        <!--                <div class="layui-input-inline">-->
        <!--                    <select name="modules" lay-verify="required" lay-search="">-->
        <!--                        <option value="">直接选择或搜索选择</option>-->
        <!--                        <option value="1">layer</option>-->
        <!--                        <option value="2">form</option>-->
        <!--                    </select>-->
        <!--                </div>-->
        <!--                <a class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs delmember" lay-event="del"> X </a>-->
        <!--            </div>-->

                    <button type="button" class="layui-btn layui-btn-sm" id="mybtn" style="margin-left: 25px">添加</button>
                </div>
            </fieldset>

            <fieldset class="layui-elem-field" style="margin-top: 20px;">
                <legend>客户信息</legend>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">客户名称</label>
                        <div class="layui-input-inline">
                            <select name="supplier.id" lay-verify="required" lay-search="">
                                <option value="">直接选择或搜索选择</option>
                                <option th:each="suppiler:${suppilers}" th:value="${suppiler.id}" th:text="${suppiler.name}"></option>
                            </select>
                        </div>
                    </div>
                </div>
            </fieldset>

            <fieldset class="layui-elem-field" style="margin-top: 20px;">
                <legend>出差目的</legend>
                <div class="layui-form-item">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label"> </label>
                        <div class="layui-input-block">
                            <textarea lay-reqtext="请输入出差目的" lay-verify="required" name="purpose" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                </div>
            </fieldset>

            <fieldset class="layui-elem-field" style="margin-top: 20px;">
                <legend>行程计划</legend>
                <div class="layui-form-item">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label"> </label>
                        <div class="layui-input-block">
                            <textarea lay-reqtext="请输入行程计划" lay-verify="required" name="planTravel" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                </div>
            </fieldset>

            <fieldset class="layui-elem-field" style="margin-top: 20px;">
                <legend>资金预算</legend>
                <div class="layui-form-item">
        <!--            <button type="button" class="layui-btn" id="add-ticket-btn">添加订票申请</button>-->
        <!--            <button type="button" class="layui-btn" id="add-vehicle-btn">添加派车申请</button>-->
        <!--            <button type="button" class="layui-btn" id="add-hotel-btn">添加住宿申请</button>-->
                    <div class="layui-inline">
                        <label class="layui-form-label">金额</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input lay-verify="number" type="text" name="planMoney" placeholder="￥" autocomplete="off" class="layui-input">
                        </div>
                        <button type="button" class="layui-btn layui-btn-primary" disabled="disabled ">差旅标准:800.00￥</button>
                    </div>
                </div>
        <!--        <fieldset class="layui-elem-field" style="margin: 20px;">-->
        <!--            <legend style="font-size: 17px">订票</legend>-->
        <!--            <div class="layui-form-item">-->
        <!--                <div class="layui-inline">-->
        <!--                    <label class="layui-form-label">出行方式</label>-->
        <!--                    <div class="layui-input-inline">-->
        <!--                        <select name="modules" lay-verify="required" lay-search="">-->
        <!--                            <option value="">直接选择或搜索选择</option>-->
        <!--                            <option value="1">飞机</option>-->
        <!--                            <option value="2">高铁</option>-->
        <!--                        </select>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--                <div class="layui-inline">-->
        <!--                    <label class="layui-form-label">出发日期</label>-->
        <!--                    <div class="layui-input-inline">-->
        <!--                        <input type="text" name="date" id="transport-begin-date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">-->
        <!--                    </div>-->
        <!--                </div>-->

        <!--                <div class="layui-inline">-->
        <!--                    <label class="layui-form-label">席位等级</label>-->
        <!--                    <div class="layui-input-inline">-->
        <!--                        <select name="modules" lay-verify="required" lay-search="">-->
        <!--                            <option value="">直接选择或搜索选择</option>-->
        <!--                            <option value="1">头等舱</option>-->
        <!--                            <option value="2">头等舱</option>-->
        <!--                        </select>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--                <div class="layui-inline">-->
        <!--                    <label class="layui-form-label">出发地</label>-->
        <!--                    <div class="layui-input-inline">-->
        <!--                        <select name="modules" lay-verify="required" lay-search="">-->
        <!--                            <option value="">直接选择或搜索选择</option>-->
        <!--                            <option value="1">上海</option>-->
        <!--                            <option value="2">北京</option>-->
        <!--                        </select>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--                <div class="layui-inline">-->
        <!--                    <label class="layui-form-label">目的地</label>-->
        <!--                    <div class="layui-input-inline">-->
        <!--                        <select name="modules" lay-verify="required" lay-search="">-->
        <!--                            <option value="">直接选择或搜索选择</option>-->
        <!--                            <option value="1">北京</option>-->
        <!--                            <option value="2">上海</option>-->
        <!--                        </select>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--                <div class="layui-inline">-->
        <!--                    <label class="layui-form-label">班次</label>-->
        <!--                    <div class="layui-input-inline">-->
        <!--                        <input type="text" name="username" lay-verify="required" lay-reqtext="请输入申请人信息" placeholder="请输入" autocomplete="off" class="layui-input">-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--                <div class="layui-inline">-->
        <!--                    <label class="layui-form-label">单价</label>-->
        <!--                    <div class="layui-input-inline" >-->
        <!--                        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--                <div class="layui-inline">-->
        <!--                    <label class="layui-form-label">数量</label>-->
        <!--                    <div class="layui-input-inline">-->
        <!--                        <input type="text" readonly="readonly" name="username" lay-verify="required" lay-reqtext="请输入申请人信息" placeholder="请输入" autocomplete="off" class="layui-input">-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--                <div class="layui-input-block buy-ticket-member-box">-->
        <!--                    <input type="checkbox" name=" " title="写作" checked>-->
        <!--                    <input type="checkbox" name=" " title="阅读" checked>-->
        <!--                    <input type="checkbox" name=" " title="游戏" checked>-->
        <!--                </div>-->

        <!--            </div>-->
                </fieldset>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button style="margin-left: 600px" type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</body>

</html>
